<template>
  <el-form ref="form" :model="form" label-width="80px">
       <el-form-item :label="item.label" v-for="(item, index) in formLabel" :key='index'>
          <el-input v-model="form[item.key]" v-if="item.type === 'input'"></el-input>
          <el-select v-model="form[item.key]" placeholder="请选择活动区域" v-if="item.type === 'select'">
          
          <el-option  v-for="(subitem, index) in item.options" :key='index' :label='subitem.lable' :value="subitem.value"></el-option>
    </el-select>

      <el-date-picker v-if="item.type === 'date-picker'" type="date" placeholder="选择日期" v-model="form[item.key]" style="width: 100%;"></el-date-picker>
   

       </el-form-item>
       

  </el-form>
</template>

<script>
     export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabel: [
            {
                label: '活动名称',
                key: 'name',
                type: 'input'
            },
            {
                label: '活动区域',
                key: 'regin',
                type: 'select',
                options: [
                    {
                        label: '区域1',
                        value: 'shanghai'
                    },
                    {
                        label: '区域2',
                        value: 'beijing'
                    }
                ]
            },
            {
                label: '活动时间',
                key: 'date1',
                type: 'date-picker'
            }
        ],
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<style  scoped>

</style>